	/* Colors and stuff
		
		#599265 - Main green
		#8ab493 - Secondary green

	*/

	/* Global */

	html, body {
		height: 100%;
	}

	.top {
		width: 120px;
		height: 100%;
		position: fixed;
		z-index: 1;
		top: 0;
		background: rgba(138, 180, 147, .0);
		cursor: pointer;
		display: none;
	}

	.top .top-btn {
		position: absolute;
		bottom: 0px;
		background: rgba(138, 180, 147, .8);	
		width: 100%;
		padding: 20px 0px 20px 0px;
		text-align: center;
		color: #FFF;
		opacity: .6;
	}

	.top:hover {
		background: rgba(138, 180, 147, .3);
	}
	.top:hover .top-btn{
		opacity: 1;
	}

	body {
		font-family: 'Open Sans', sans-serif;
		font-weight: 400;
		font-size: 1em;
		color: #8a8683;
		background-color:#ffffff;
	}
	img {
		max-width: 100%;
	}
	a:link {
		color: #599265;
		text-decoration: none;
	}
	a:hover {
		color: #bde2df;
		text-decoration: none;
	}
	a:visited {
		color: #599265;
		text-decoration: none;
	}





	/* Navigation */

	.menu {
		position:fixed;
		top:0px;
		width:100%; 
		height:auto; 
		background-color:#ffffff;
		z-index:100;
		border-bottom: #599265 4px solid;
		height: 80px;
	}
	#logo {
		text-align: center;
		margin: 10px 0 0 0;
	}
	#nav {
		text-align: right;
		margin: 30px 0 0 0;
	}

	.cart {
		position: relative;
		height: 80px;
		width: 80px;
		background-color:#599265;
		color: #FFF;
		top: -30px;
		right: -20px;
	}

	.cart img {
		position: relative;
		right: 20px;
		top: 20px;
		z-index:100;
	}

	.cart-container {
		position: fixed;
		top: 84px;
		width: 100%;
		background-color: #599265;
		color: #FFF;
		display: none;
		height: 0;
	}
	.cart-container h1 {
		text-align: center;
	}

	#signin{
	}

	.navigation{
		float: right;
		list-style: none;
		margin: 0;
	}
	.navigation li{
		float: left;
		padding:0 0 34px 50px;
	}
	.navigation li:hover{
		cursor:pointer;
		color: #a9d3d0;
	}

	.navigation .active{
		cursor:pointer;
		color: #599265;
		font-weight:bold;
	}




	/* General Slides */ 

	.slide{
		background-attachment: fixed;
		width:100%;
		height:auto;
		position: relative;
		padding:140px 0;
	}

	/* Slide 2 */ 

	#slide2{
		background-image:url('../images/apple_bg.jpg');
		background-size: 100% auto;
		background-color:#599265;
		color:#ffffff;

		position: relative;
		padding-top: 200px;
	}

	#slide2 h1 {
		font-size: 3em;
		letter-spacing: -3px;
		line-height: 0px;
		color:#ffffff;
		font-weight: 700;
	}
	#slide2 h2 {
		font-size: 2em;
		color: #ffffff;
		line-height: 0px;
		padding-bottom:20px;
		font-weight: 400;
	}

	#slide2 img {
		height: 400px;
		position: absolute;
		bottom: -200px;
		right: 100px;
	}

	/* Slide 3 */ 

	#slide3{
		background-color:#ffffff;
		padding-top: 50px;
		box-shadow: 0 0 3px rgba(0, 0, 0, .3);
	}
	#slide3 h1 {
		font-size: 3.8em;
		letter-spacing: -3px;
		line-height: 0px;
		color:#8a8683;
		font-weight: 700;
	}
	#slide3 h2 {
		font-size: 2em;
		color: #8a8683;
		line-height: 0px;
		padding-bottom:20px;
		font-weight: 400;
	}
	#slide3 img {
		width: 100%;
		height: 100%;
	}
	#slide3 .grid_6 {
		position: relative;
		width: 450px;
		height: 300px;
		cursor: pointer;
	}
	
	#slide3 .grid_6_modified {
		position: relative;
		width: 480px;
		height: 300px;
		cursor: pointer;
		float:left;
		margin-left:1%;
		margin-right:1%;
		margin-bottom:1%;
	}
		
	#slide3 .grid_4_partner {
		position: relative;
		width: 450px;
		height: 300px;
		cursor: pointer;
	}

	#slide3 .grid_6_cond {
		position: relative;
		width: 47%;
		cursor: pointer;
		margin:0;
		padding:0;
	}

	#slide3 .grid_6_modified p.header {
		color: #ffffff;
		font-weight: 600;
		padding: 10px;
		padding-right: 85px;
		position: relative;
		top: -16px;
		background: rgba(89, 146, 101, .6);
	}
	
	#slide3 .grid_6_modified p.desc {
		display: none;
		padding: 10px;
	}
	
	#slide3 .grid_6_modified p.desc a.btn{
		position: absolute;
		bottom:10px;
		right: 10px;
	}
	
	#slide3 .grid_6_modified div.deal-header {
		position: absolute;
		top:0;
		height: 42px;
		width: 100%;
		color: #FFF;
		background: rgba(138, 180, 147, .0);
	}

	.deal-selected{
		position:absolute;
		bottom:-20px;
		left:40%;
		width: 0px;
		height: 0px;
		border-bottom: 50px solid #8ab493; 
		border-left: 50px solid transparent; 
		border-right: 50px solid transparent; 
		display: none;
	}

	#slide3 .grid_6_modified .deal-header i {
		position: absolute;
		font-style: normal;
		right: 20px;
		top: 5px;
		display: inline-block;
		font-size: 25px;
		padding: 15px 0 15px 0;
		width: 65px;
		border: 3px #599265 solid;
		text-align: center;
		color: #599265;
		border-radius: 50%;
		background: #FFF;
	}

	/* Slide 4 */

	#slide4{
		background-image:url('../images/jw-help.png');
		background-color:#8a8683;
		color:#ffffff;
	}
	#slide4 h1 {
		font-size: 3.8em;
		letter-spacing: -3px;
		line-height: 0px;
		color:#ffffff;
		font-weight: 700;
	}
	#slide4 h2 {
		font-size: 2em;
		color: #ffffff;
		line-height: 0px;
		padding-bottom:20px;
		font-weight: 400;
	}

	#slide5 {
		background-color: #333;
		color: #FFF;
	}


	/* Tablet
	@media screen and (max-width: 1024px) {

	#logo {
		width: 100%;
		text-align: center;
	}

	#nav {
		width:100%;
		text-align:center;
		margin:10px 0;
	}

	.navigation{
		width: 100%;
		float: center;
		list-style: none;
		margin: 0;
		padding:0;
	}

	.navigation li{
		float: left;
		width:25%;
		padding:0;
	}

	.slide{
		background-attachment: fixed;
		width:100%;
		position: relative;
		padding:150px 0;
	}

	#decorative {
		display:none;
	}

	#content {
		text-align:center;
		width:100%;
	}

	#slide2 {
		padding-top: 120px;
	}
	#slide2 img {
		display: none;
	}

	#slide1 h1 {
		line-height: 1em;
	}
	#slide1 h2 {
		line-height: 1em;
	}
	#slide2 h1 {
		line-height: 1em;
	}
	#slide2 h2 {
		line-height: 1em;
	}
	#slide3 h1 {
		line-height: 1em;
	}
	#slide3 h2 {
		line-height: 1em;
	}
	#slide4 h1 {
		line-height: 1em;
	}
	#slide4 h2 {
		line-height: 1em;
	}

	}

*/

	/* Mobile 
	@media screen and (max-width: 480px) {

	#logo {
		width: 100%;
		text-align: center;
	}

	#nav {
		width:100%;
		margin:5px 0;
	}

	.navigation{
		width: 100%;
		float: left;
		list-style: none;
		margin: 0;
		padding:0;
	}

	.navigation li{
		float: left;
		width:25%;
	}

	.slide{
		background-attachment: fixed;
		width:100%;
		position: relative;
		padding:150px 0;
	}


	#slide1 h1 {
		line-height: 1em;
	}
	#slide1 h2 {
		line-height: 1em;
	}
	#slide2 h1 {
		line-height: 1em;
	}
	#slide2 h2 {
		line-height: 1em;
	}
	#slide3 h1 {
		line-height: 1em;
	}
	#slide3 h2 {
		line-height: 1em;
	}
	#slide4 h1 {
		line-height: 1em;
	}
	#slide4 h2 {
		line-height: 1em;
	}


	}
*/

	/* Footer */

	.help-container {
		background-color: rgba(0, 0, 0, .5);
		padding: 20px;
		border-radius: 10px;
		box-shadow: 0 0 5px rgba(0,0,0,.5) inset;
	}

	.help-container a{
	}


	.relative-holder {
		position: relative;
	}

	.btn {
		padding: 11px 30px;
		border: 3px #599265 solid;
		background: #FFF;
		color: #599265;
	}
	.btn:hover {
		border: 3px #FFF solid;
		background: #599265;
		color: #FFF;
		animation: .4s btn-animate;
		-webkit-animation: .4s btn-animate;
	}

	.btn-big {
		font-size: 2em;
		font-weight: 600;
		position: relative;
		top: 30px;
	}

	.btn-arrow {
		margin-left: 5px;
		margin-right: 10px;
	}

	.btn:hover .btn-arrow {
		margin-left: 15px;
		margin-right: 0px;
		animation: 1s btn-arrow-animate infinite ease-in-out;
		-webkit-animation: 1s btn-arrow-animate infinite ease-in-out;
	}

	.text-center {
		text-align: center;
	}

	@keyframes btn-animate {
		from {
			border: 3px #599265 solid;
			background: #FFF;
			color: #599265;
		}
		to {
			border: 3px #FFF solid;
			background: #599265;
			color: #FFF;
		}
	}

	@-webkit-keyframes btn-animate {
		from {
			border: 3px #599265 solid;
			background: #FFF;
			color: #599265;
		}
		to {
			border: 3px #FFF solid;
			background: #599265;
			color: #FFF;
		}
	}

	@keyframes btn-deanimate {
		from {
			border: 3px #FFF solid;
			background: #599265;
			color: #FFF;
		}
		to {
			border: 3px #599265 solid;
			background: #FFF;
			color: #599265;
		}
	}

	@-webkit-keyframes btn-deanimate {
		from {
			border: 3px #FFF solid;
			background: #599265;
			color: #FFF;
		}
		to {
			border: 3px #599265 solid;
			background: #FFF;
			color: #599265;
		}
	}


	@keyframes btn-arrow-animate {
		0% {
			margin-left: 5px;
			margin-right: 10px;
			opacity: 0;
		}

		50% {
			margin-left: 15px;
			margin-right: 0px;
			opacity: 1;
		}

		100% {
			margin-left: 5px;
			margin-right: 10px;
			opacity: 0;
		}
	}

	@-webkit-keyframes btn-arrow-animate {
		0% {
			margin-left: 5px;
			margin-right: 10px;
			opacity: 0;
		}

		50% {
			margin-left: 15px;
			margin-right: 0px;
			opacity: 1;
		}

		100% {
			margin-left: 5px;
			margin-right: 10px;
			opacity: 0;
		}
	}

	.social {
		position: fixed;
		right: -35px;
		top: 200px;
		z-index: 51;

		width: 50px;
		padding: 10px;

		background-color: #DDD;
		box-shadow: 0 0 3px rgba(0, 0, 0, .3);
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
		border-top: 1px #CCC solid;
		border-left: 1px #CCC solid;
		border-bottom: 1px #CCC solid;
	}
	.social:hover {
		animation: .5s social-hover ease-in-out;
		-webkit-animation: .5s social-hover ease-in-out;
		right: -5px;
	}
	.social img {
		-webkit-filter: grayscale(100%);
	}
	.social img:hover {
		-webkit-filter: grayscale(0%);
	}

	@-webkit-keyframes social-hover {
		from {
			right: -35px;
		}
		to {
			right: -5px;
		}
	}
	@keyframes social-hover {
		from {
			right: -35px;
		}
		to {
			right: -5px;
		}
	}

	.banner {
		position: fixed;
		top: 80px;
		z-index: 101;
		left: 10px;
		background: #FFF;

		width: 300px;
		height: 100px;
		border: 4px #599265 solid;
	}

	.banner .close {
		position: absolute;
		bottom: -2px;
		right: -2px;
		display: inline-block;
		width: 20px;
		height: 20px;
		text-align: center;
		background-color: #599265;
		color: #FFF;
		cursor: pointer;
		border: 2px #599265 solid;
	}

	.banner img {
		width: 300px;
		height: 100px;
	}

	.desc-holder {
		height: 400px;
		display: none;
	}
	
	.desc-bg {
		height: 400px;
		width: 100%;
		left: 0px;
		margin:0;
		background-color: #8ab493;
		z-index: 0;
		box-shadow: 0 1 5px rgba(0, 0, 0, .6) inset;
		border-bottom: 1px #eee solid;
	}

	.desc-holder .close-desc {
		position: absolute;
		color: #FFF;
		z-index: 101;
		top: 0px;
		left : 0px;
	}

	.desc-grid {
		margin-top:-10px;
		margin-left:10px;
	}

	.description{
		width:100%;
		padding:20px;
	}
	
	.desc-grid p{
		color: #FFF;
		font-size: 1.5em;
		font-weight: 600;
		margin: 0;
	}

	.desc-grid h2, .desc-grid h3, .desc-grid h5 {
		color: white;
		margin:0;
	}

	.comment-container{
		display: inline-block;
		
		width:500px;
		padding:0px 5px 10px 10px;
	
		margin: auto;

		background-color: #EEE;
		border-radius: 4px;
		box-shadow: 0 0 5px rgba(0, 0, 0, .3);
	}

	.comment-author{
		font-size:16px;
		font-weight: bold;
		width:100%;
		margin-top:-10px;
		padding:0;
	}

	.comment-text{
		font-size:12px;
		margin:0;
	}

	.admin-comment{
		background: #8ab493;
		color:#fff;
	}

	.leave-comment-container{
		width:100%;
		height:250px;
	}

	.offset1{
		margin-left:100px;
	}

	.comment-area{
		width:100%;
		height:150px;
		border: 2px solid #599265;
		outline:none;
		padding:10px;
		overflow: auto;
		box-sizing: border-box;
	}

	.answerer-ava {
		float: right;
		width:100px;
		height:100px;
		margin-left:20px;
		vertical-align: top;
	}

	.user-ava{
		width:100px;
		height:100px;
		margin-right:20px;
		vertical-align: top;	
	}

	.user-comment {
		clear: both;
	}

	.user_comment{
		font-weight:bold;
    	margin-bottom:20px;
	}
	
	.admin_comment{
	  border-radius: 10px;
	  background:#C3F2C2;
	  padding:0 0 0 10px;
	  box-shadow:0px 0px 2px rgba(0,0,0,.2) inset;
	}

	.answer-comment {
		float:right;
		margin-top:10px;
		margin-bottom:10px;
	}

	.clear{ clear:both; height: 50px;}

	.arrow-left {
		position: relative;
		content:'';
		display:block;
		top:10px;
		left:-30px;
		width:0;
		height:0;
		border-color: transparent #EEE transparent transparent;
		border-style: solid;
		border-width: 10px;
	}
	.arrow-right {
		position: relative;
		content:'';
		display:block;
		top:10px;
		right:-502px;
		width:0;
		height:0;
		border-color: transparent transparent transparent #8AB493;
		border-style: solid;
		border-width: 10px;
	}



.wow-users-ava{
	margin: auto;
	z-index: 0;
	text-align: center;
	height: 350px;
}


.img-container {
	width: 20%;
	display: inline-block;
	z-index: 0;
	position: relative;
}

.ic-3 {
	width: 200px;
	height: 200px;
	top: 60px;
	left: -60px;
}
.ic-2 {
	width: 250px;
	height: 250px;
	top: 50px;
	left: 40px;
}

.ic-1 {
	height: 300px;
	width: 300px;
	top: -20px;
}

.img-container img {
	border-radius: 50%;
	box-shadow: 3px 3px 5px rgba(0, 0, 0, .8);
	position: relative;
	z-index: 1;
}

.img-container:hover img {
	-webkit-animation: .4s turn-to-box ease-in-out;
	z-index: 5;
	border-radius: 20px;
	top: -100px;
}

.img-container:hover {
	z-index: 5;
}

@-webkit-keyframes turn-to-box {
	from {
		top: 0;
		border-radius: 50%;
		-webkit-transform: rotate(0deg);
	}

	to {
		top: -100px;
		border-radius: 20px;
		-webkit-transform: rotate(360deg);
	}
}
